<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-image: url(../img/bg1.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .container{
        position: relative;
        width: 390px;
        height: 293px;
        margin: 100px auto;
        background-color: rgb(223, 141, 126);
    }
    .container .nav {
        position: absolute;
        width: 20%;
        height: 100%;
        background-color: rgba(228, 191, 142, 0.705);
    }
    .container .nav ul>li{
        list-style: none;
        padding: 12px;
        font-size: 18px;
        border-bottom: 1px solid rgba(34, 67, 89, .6);
        border-right: 1px solid rgba(34, 67, 89, .6);
        cursor: pointer;
    }
    .container .nav ul .img6{
        border-bottom: none;
    }
    .container .nav ul>li:hover{
        background-color: rgba(169, 165, 223, 0.911);
    }
    .container .nav ul .active{
        background-color: rgba(169, 165, 223, 0.911);
    }
    .container .img{
        position: absolute;
        left: 20%;
        width: 80%;
        height: 100%;
    }
    .container .img img{
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    }
    .container .img .image1{
        display: block;
    }
</style>
<body>
    <div class="container">
        <div class="nav">
            <ul>
                <li class="active">图片1</li>
                <li>图片2</li>
                <li>图片3</li>
                <li>图片4</li>
                <li>图片5</li>
                <li class="img6">图片6</li>
            </ul>
        </div>
        <div class="img">
            <img class="image1" src="img/img1.jpg" alt="">
            <img src="img/img2.jpg" alt="">
            <img src="img/img3.jpg" alt="">
            <img src="img/img4.jpg" alt="">
            <img src="img/img5.jpg" alt="">
            <img src="img/img6.jpg" alt="">
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $(".nav li").click(function(){
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                $(".img img").eq(index).show().siblings().hide();
            });
        })
    </script>
</body>
</html>